﻿package multitouch.gui {

	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TUIO;
	import flash.events.*;
	import multitouch.model.*;
	
	public class GUI extends MovieClip {
		
		private var kaarten:Array = new Array();
		private var placeholders:Array = new Array();
		private var model:Model;
		private var nwMedewerker:Sprite;
		private var nwClient:Sprite;
	
		public function GUI( hetModel:Model ):void {
			model = hetModel;
			
			// Knoppen voor nieuwe client en medewerker toevoegen
			nwMedewerker = nieuweKnop( 300, 20, 200, 25, 0x0000FF, "Nieuwe Medewerker" );
			nwClient = nieuweKnop( 525, 20, 200, 25, 0x0000FF, "Nieuwe Client" );
			nwMedewerker.addEventListener(MouseEvent.CLICK, nieuweMedewerker);
			nwMedewerker.addEventListener(TouchEvent.CLICK, nieuweMedewerker);
			nwClient.addEventListener(MouseEvent.CLICK, nieuweClient);
			nwClient.addEventListener(TouchEvent.CLICK, nieuweClient);
			
			addChild(nwMedewerker);
			addChild(nwClient);
			
			tekenPlaceholders(8,8);
			dispatchEvent(new Event("guiReady", true));
		}
		
		
		public function nieuweKnop( xPos:int, yPos:int, breedte:int, hoogte:int, kleur:int, tekst:String ):Sprite {
			// De knop
			var knop:Sprite = new Sprite();
			knop.graphics.lineStyle(3, kleur, 1);
			knop.graphics.beginFill(kleur);
			knop.graphics.drawRect(xPos,yPos,breedte,hoogte);
			knop.graphics.endFill();
			
			// Tekst lettertype en grootte
			var knopTextFormat:TextFormat = new TextFormat();
			knopTextFormat.font = "Arial";
			knopTextFormat.size = 14;
			
			// Tekstveld
			var knopText:TextField = new TextField();
			knopText.text = tekst;
			knopText.setTextFormat(knopTextFormat);
			knopText.selectable = false;
			knopText.autoSize = TextFieldAutoSize.CENTER;
			knop.addChild(knopText);
			knopText.x = ( breedte - knopText.width ) / 2;
			knopText.y = ( hoogte - knopText.height ) / 2;
			return knop;
		}
		
		public function tekenPlaceholders( rijen:int, kolommen:int ):void {
			var i:int = 0;
			var j:int = 0;
			var aantalRijen:int = rijen;
			var aantalKolommen:int = kolommen;
			var dX:int = 0;
			var dY:int = 0;
			var breedte:int = 100;
			var hoogte:int = 50;
			var tussenAfstand:int = 25;

			for (i=0; i < aantalKolommen; i++) {
				dY = 0;
				dX = dX + breedte + tussenAfstand;
				for (j=0; j < aantalRijen; j++) {
					dY = dY + hoogte + tussenAfstand;
					var placeholder:Placeholder = new Placeholder( i, j );
					placeholder.graphics.lineStyle(3, 0xCCCCCC, 0.3);
					placeholder.x = dX;
					placeholder.y = dY;
					placeholder.alpha = 0.2;
					placeholder.graphics.beginFill(0xCCCCCC);
					placeholder.graphics.drawRect(0,0,breedte,hoogte);
					placeholder.graphics.endFill();
					placeholder.addEventListener(TouchEvent.MOUSE_OVER, mouseOverPlaceholder);
					placeholder.addEventListener(TouchEvent.MOUSE_OUT, mouseOutPlaceholder);
					placeholders.push(placeholder);
					addChild(placeholder);
				}
			}
		}
		private function mouseOverPlaceholder(e:Event):void {
			e.target.alpha = 1;
		}
		private function mouseOutPlaceholder( e:Event ):void {
			e.target.alpha = 0.2;
		}
		private function releaseKaart(e:Event):void {
			var i:int = 0;
			for (i=0; i<placeholders.length; i++) {
				if ( e.target.hitTestObject(placeholders[i]) ) {				
						e.target.x = placeholders[i].x-10;
						e.target.y = placeholders[i].y-10;
						e.target.setRijID( placeholders[i].getRijID() );
						e.target.setKolomID( placeholders[i].getKolomID() );
						// model.getTabel().setElement(placeholders[i].getRijID(), placeholders[i].getKolomID(), e.target);
						break;
				}
			}
		}
		private function nieuweMedewerker(e:Event):void {
			model.nieuweMedewerker("test");
			var kaartje:Kaart = new Kaart("", true);
			kaartje.addEventListener(MouseEvent.MOUSE_UP, releaseKaart);
			kaartje.addEventListener(TouchEvent.MOUSE_UP, releaseKaart);
			kaarten.push(kaartje);
			addChild(kaartje);
		}
		private function nieuweClient(e:Event):void {
			model.nieuweClient("test");
			var kaartje:Kaart = new Kaart("", false);
			kaartje.addEventListener(MouseEvent.MOUSE_UP, releaseKaart);
			kaartje.addEventListener(TouchEvent.MOUSE_UP, releaseKaart);
			kaarten.push(kaartje);
			addChild(kaartje);
		}
	}
}